<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/me.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/rem.js"></script>
    <title>教育网移动端</title>
</head>
<body>
    <div class="me">
        <!-- 头部信息 -->
        <div class="header">
            <a href="../index.html">
                <img src="../imgs/now/now_back.png" alt="">
            </a>
            <p>个人中心</p>
            <div class="me-info">
                <img src="../imgs/me/me_head.gif" alt="">
                <div class="info-message">
                    <h2 style="font-size:.24rem;">赵昂</h2>
                    <p>学号：<span>666</span></p>
                    <p>电话：<span>15068870964</span></p>
                </div>
            </div>
        </div>
        <!-- 密码微信相关 -->
        <div class="me-loginmsg">
            <ul>
                <li class="loginpass">登录密码修改</li>
                <li class="paypass">支付密码修改</li>
                <li class="others unbind">微信解绑</li>
                <li class="others switchstudent">切换学员</li>
                <li class="others deallog">交易记录</li>
            </ul>
        </div>
        <!-- 我的订单 -->
        <div class="me-order">
            <div class="order-title">
                <img src="../imgs/me/me_order.gif" alt="">
                <span>我的订单</span>
                <span class="me-others">查看全部订单></span>
            </div>
            <div class="order-info">
                <div class="info-pay me-others">
                    <span>0</span>
                    <img src="../imgs/me/me_pay.gif" style="width:.38rem;height:.3rem;" alt="">
                    <p>待支付</p>
                </div>
                <div class="info-done me-others">
                    <span>0</span>
                    <img src="../imgs/me/me_done.png" style="width:.34rem;height:.34rem;" alt="">
                    <p>已完成</p>
                </div>
            </div>
        </div>
        <!-- 我的钱包 -->
        <div class="me-wallet">
            <div class="wallet-title">
                <img src="../imgs/me/me_wallet.gif" alt="">
                <span>我的钱包</span>
            </div>
            <div class="wallet-info">
                <ul>
                    <li class="me-others">
                        <span style="color:red;">0.00</span>
                        <p>账户余额</p>
                    </li>
                    <li class="me-others">
                        <span>0</span>
                        <p>电子券</p>
                    </li>
                    <li class="me-others">
                        <span>40.00</span>
                        <p>可用积分</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        //密码部分的跳转
        let $pass = $(".me .me-loginmsg > ul > li"); 
        $pass.each(function(index){
            $pass.eq(index).click(function(){
                index==2?unbindAlert():$(location).attr("href",`./me_info.html?index=${index}`);
            });
        });
        let unbindFlag = true;
        function unbindAlert(){
            let $unbind = $(`
                <div>
                    <ul class="unbind">
                        <li class="unbind-tips">提示<li>
                        <li class="unbind-info">您是否确认解除微信绑定？<li>
                        <li class="unbind-choose">
                            <span>确认</span>    
                            <span style="margin-right:.2rem">取消</span>    
                        <li>
                    </ul>    
                </div>
            `);
            if(unbindFlag){
                $(".me").append($unbind);
                unbindFlag = false;
            };
            $unbind.css({
                "position":"absolute",
                "top":"0",
                "left":"0",
                "width":"100%",
                "height":"100%",
                "background":"rgba(0,0,0,.3)"
            });
            $unbind.children(".unbind").css({
                "width":"3rem",
                "height":"2rem",
                "background":"#fff",
                "margin":"50% auto",
                "border-radius":".08rem",
                "box-shadow":"0 0 .1rem #ccc"
            });
            $unbind.find(".unbind .unbind-tips").css({
                "width":"100%",
                "height":".5rem",
                "line-height":".5rem",
                "text-indent":".2rem",
                "border-bottom":"1px solid #ccc",
                "font-size":".24rem"
            });
            $unbind.find(".unbind .unbind-info").css({
                "width":"100%",
                "height":".9rem",
                "line-height":".9rem",
                "text-align":"center",
                "border-bottom":"1px solid #ccc",
                "font-size":".2rem"
            });
            $unbind.find(".unbind .unbind-choose").css({
                "width":"100%",
                "height":".6rem",
                "line-height":".6rem",
                "text-align":"right"
            });
            $unbind.find(".unbind .unbind-choose > span").css({
                "display":"inline-block",
                "width":".7rem",
                "height":".4rem",
                "line-height":".4rem",
                "text-align":"center",
                "background":"#337ab7",
                "color":"#fff",
                "border-radius":".04rem",
                "font-size":".2rem"
            });
            $unbind.find(".unbind .unbind-choose > span").eq(1).css({
                "background":"#eee",
                "color":"#000"
            });
            //取消按钮
            $(".unbind").parent().css("display","block");
            let $cancel = $unbind.find(".unbind .unbind-choose > span").eq(1);
            $cancel.click(function(){
                $unbind.hide();
            });
        };
        //我的订单
        let $mine = $(".me .me-others");
        $mine.each(function(i){
            $mine.eq(i).click(function(){
                $(location).attr("href",`./me_info.html?i=${i+5}`);
            });
        });
    </script>
</body>
</html>